<template>
    <div class="game-invite-bar-container">
        <div class="invite-list" v-for="(item, index) in inviteList" :key="index">
            <img class="avatar" width="30" height="30" :src="Util.getImgUrl(item.avatar)">
            <div class="text">
                <span>好友{{ item.nickname }}</span>
                <span>邀请你进行游戏 {{ item.gameName }}</span>
            </div>
            <div class="icon">
                <el-icon :size="20" class="closeBold" @click="rejectInvite(item.gameid, item.sender, index)">
                    <CloseBold />
                </el-icon>
                <el-icon :size="20" class="select" @click="acceptInvite(item.gameid, item.sender, index)">
                    <Select />
                </el-icon>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import Hlddz from '@/game/model/hlddz'
import { Util, getUserInfo } from '@/Util'
import eventBus from '@/Util/EventBus'
import { InviteMsgType } from '@/Util/Constant'
import { Select, CloseBold } from '@element-plus/icons-vue'
// 注意，这个组件需要处理多条消息，因为可能存在多条好友邀请
// 他需要有广播的能力，计划做成游戏弹出来的划框，有一个对号和一个x号，两个点击都需要发送一条信息，表示这条邀请是接收还是拒绝
// 这个组件需要维护一个数组，当任务来了，我们计算出要弹出的位置，并弹出来，每一个都有独立的计时，到点就会消失。
// 有最大显示容量，需要维护一个队列，当前显示的满了，添加到显示队列里。当队列有空闲，就需要从任务队列里获取。
// 需要考虑另一个邀请的客户端的显示，也需要通过这种方式，因此这个组件尽量做的通用。
let inviteList = reactive<InviteMsgType[]>([]);
let maxShowNum: number = 3; // 最大显示容量
let pendingMsgList: InviteMsgType[] = []; // 等候消息队列
let myName = getUserInfo().username;

const router = useRouter()
const route = useRoute()
onMounted(() => {
    eventBus.on('showGameInviteBar', showGameInviteBar)
})
const acceptInvite = async (gameid: string, sender: string, index: number) => {
    let { data } = await axios.post('/game/accept', {
        gameid,
        inviteUser: myName,
        sender
    })
    let model = data.data as Hlddz;
    // 这个时候应该切换房间或者跳转到游戏路由页面
    // 如果当前在游戏路由，那么需要重新获取新的model
    // 如果当前不在路由，需要跳转，并获取model，初始化页面
    // 因此无论是否在，都需要重新获取model
    let routePath = route.path
    if (routePath !== '/home/game') { // 不在游戏房间
        router.push({
            path: '/home/game',
            query: { gameid }
        })
    } else { // 在游戏房间
        router.push({
            path: '/home/game',
            query: { gameid }
        });
        (Hlddz.getInstance() as Hlddz).changePlayer(model.players, model.gameId)
    }
    // 跳转到游戏路由
    // loadModel   需要具备这个能力
    inviteList.splice(index, 1)
}
const rejectInvite = (gameid: string, sender: string, index: number) => {
    console.log(gameid, sender)
}
const popPendingMsgList = () => {
    if (!pendingMsgList.length) return;
    let msg = pendingMsgList.shift();
    showGameInviteBar(msg)
}
const showGameInviteBar = (inviteMsg: InviteMsgType) => {
    if (inviteList.length >= maxShowNum) {
        pendingMsgList.push(inviteMsg)
        return;
    }
    inviteList.push(inviteMsg)
    let timer = setTimeout(() => {
        if (inviteList.includes(inviteMsg)) {
            let index = inviteList.findIndex((item) => item.gameid === inviteMsg.gameid)
            inviteList.splice(index, 1);
        }
        popPendingMsgList();
        clearTimeout(timer)
    }, 30000);
}
</script>


<style scoped lang="less">
.game-invite-bar-container {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 99999;

    .invite-list {
        padding: 15px;
        display: flex;
        align-items: center;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.3);
        color: #fff;
        font-size: 12px;
        border-radius: 0 15px 15px 0;

        .text {
            display: flex;
            flex-direction: column;
            margin-right: 10px;
            user-select: none;
        }

        .avatar {
            border-radius: 50%;
            margin-right: 10px;
        }

        .icon {
            display: flex;
            width: 70px;
            justify-content: space-between;

            .closeBold {
                color: rgb(222, 60, 60);

                &:hover {
                    background-color: rgba(0, 0, 0, 0.4);
                    color: red;
                }
            }

            .select {
                color: rgb(92, 231, 92);

                &:hover {
                    background-color: rgba(0, 0, 0, 0.4);
                    color: rgb(117, 248, 117);
                }
            }

            .closeBold,
            .select {
                cursor: pointer;
                width: 30px;
                height: 30px;
                background-color: rgba(0, 0, 0, 0.7);
                border-radius: 50%;
                transition: .3s;


            }
        }
    }
}
</style>